<template>
	
	<view class="boss">
		<view class="boss1">
			<ul>
				<li :class="navIndex==1?'current2':'current'" @click="checkIndex(1)">个人排行</li>
				<li :class="navIndex==2?'current2':'current'" @click="checkIndex(2)">今日排行</li>
				<li :class="navIndex==3?'current2':'current'" @click="checkIndex(3)">队伍排行</li>
				<li :class="navIndex==4?'current2':'current'" @click="checkIndex(4)">周排行</li>
			</ul>
		</view>
		<view class="boss2" v-if="navIndex==1">
			<p>我的排名:未上榜(共106人)</p>
			<ul>
				<li v-for="(item,index) in boss" :key="index">
					<span>{{index+1}}</span>
					<image :src="item.png"></image>
					<view class="lili">
						<p>{{item.name}}</p>
						<p>累计8天</p>
					</view>
					<span class="rt-sp">{{item.mileage}}</span>
				</li>
				
			</ul>
		</view>
		<view class="boss2" v-if="navIndex==2">
			<p>我的排名:未上榜(共106人)</p>
			<ul>
				<li>
					<span>1</span>
					<image src="../../static/微信图片_20220909094403.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>2</span>
					<image src="../../static/微信图片_20220909094416.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>3</span>
					<image src="../../static/微信图片_20220909094424.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>4</span>
					<image src="../../static/微信图片_20220909094433.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>5</span>
					<image src="../../static/微信图片_20220909094444.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>6</span>
					<image src="../../static/微信图片_20220909094403.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>7</span>
					<image src="../../static/微信图片_20220909094403.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
			</ul>
		</view>
		<view class="boss3" v-if="navIndex==3">
			<view class="boss3-1">
				<p>乡村振兴带头人能力提升班</p> <span>^</span>
			</view>
			<ul>
				<li>六组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>八组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>九组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>十组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>七组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>五组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>三组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>一组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>二组(乡村振兴带头人能力提升班) <span>250000里</span></li>
				<li>四组(乡村振兴带头人能力提升班) <span>250000里</span></li>
			</ul>
		</view>
		<view class="boss2" v-if="navIndex==4">
			<p>我的排名:未上榜(共106人)</p>
			<ul>
				<li>
					<span>1</span>
					<image src="../../static/微信图片_20220909094403.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>2</span>
					<image src="../../static/微信图片_20220909094416.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>3</span>
					<image src="../../static/微信图片_20220909094424.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>4</span>
					<image src="../../static/微信图片_20220909094433.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>5</span>
					<image src="../../static/微信图片_20220909094444.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>6</span>
					<image src="../../static/微信图片_20220909094403.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
				<li>
					<span>7</span>
					<image src="../../static/微信图片_20220909094403.jpg"></image>
					<view class="lili">
						<p>唐军</p>
					</view>
					<span class="rt-sp">25000.00</span>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					navIndex:1,
					boss:[]
			}
		},
		methods: {
			checkIndex(index){
			  this.navIndex =index;
			},
		},
		onLoad() {
			uni.request({
				url:'http://180.76.120.179:8081/xiaochengxu/index/personal',
				success: (res) => {
					console.log(res)
					this.boss = res.data.data
				}
			})
		}
	}
</script>

<style>
	.boss{background-color: #f1f1f1; overflow: hidden;}
	.boss1{background-color: white; overflow: hidden;}
	.current{float: left; width: 22%; margin-left: 2%; padding: 10px; text-align: center;border-bottom: 1px solid black;box-sizing: border-box;font-size: 0.9em;}
	.current2{float: left; width: 22%; margin-left: 2%; padding: 10px; text-align: center;border-bottom: 1px solid red;box-sizing: border-box;font-size: 0.9em;}
	.boss1 ul{list-style: none;}
	.boss2{padding: 20px;}
	.boss2 ul{list-style: none;}
	.boss2 image{border-radius:50px; width: 30px; height:30px; margin-right: 10px;}
	.boss2 p{text-align: center; margin: a auto;}
	.boss2 p:first-child{color: #7d7d7d; font-size: 0.8em;}
	.boss2 li{display: flex; align-items: center;background-color: white; padding: 10px; border-radius: 10px; margin-top: 10px;}
	.boss2 span{padding: 10px; margin-right: 10px;}
	.lili{width: 80px; overflow: hidden;}
	.lili p:first-child{font-size: 1em; color: black;}
	.lili p:last-child{font-size: 0.7em; color: #7d7d7d;}
	.rt-sp{color: red; margin-left: 50px; width: 20px; display: inline-block;}
	.boss3{margin: 20px; background-color: white; font-size: 0.8em;padding: 10px;}
	.boss3-1{display: flex;  justify-content: space-between;}
	.boss3-1 span{margin-right: 20px;}
	.boss3 p{font-weight: bold; }
	.boss3 ul{list-style: none;}
	.boss3 li{margin-top: 10px;}
	.boss3 span{margin-left: 60px;}
</style>
